<template>
	<div class="login flex flex-col">
		<div class="flex-1 flex items-center justify-center">
			<div class="login-card flex rounded-md">
				<div class="flex-1 h-full hidden md:inline-block">
					<image-contain :src="config.login_image" :width="400" height="100%" />
				</div>
				<div class="login-form bg-body flex flex-col px-10 pt-10 md:w-[400px] w-[375px] flex-none mx-auto bor">
					<div class="text-center text-3xl font-medium mb-8">{{ config.web_name }}</div>
					<el-form ref="formRef" :model="formData" size="large" :rules="rules">
						<el-form-item prop="account">
							<el-input v-model="formData.account" placeholder="请输入账号" @keyup.enter="handleEnter">
								<template #prepend>
									<icon name="el-icon-Avatar" />
								</template>
							</el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input ref="passwordRef" v-model="formData.password" show-password placeholder="请输入密码"
								@keyup.enter="handleLogin">
								<template #prepend>
									<icon name="el-icon-Lock" />
								</template>
							</el-input>
						</el-form-item>
						<el-form-item prop="captcha">
							<div class="flex">
								<el-input class="flex-1" v-model="formData.captcha" placeholder="请输入验证码"
									@keyup.enter="handleLogin">
								</el-input>
								<div class="flex"
									style="border: 1px solid #dcdfe6;width: 120px;margin-left: 5px;border-radius: 0px;background-color: blue;">
									<img style="width: 100%;height: 100%;" :src="timeing" alt="">
								</div>
								<div class="flex code" @click="onImg">
									<p style="font-size: 12px;color: #999;margin-right: 5px;">换一张</p>
									<el-icon :size="16" color="#409EFF">
										<Refresh />
									</el-icon>
								</div>
							</div>

						</el-form-item>
					</el-form>
					<div class="mb-5">
						<el-checkbox v-model="remAccount" label="记住账号"></el-checkbox>
					</div>
					<el-button type="primary" size="large" @click="lockLogin">
						登录
					</el-button>
				</div>
			</div>
		</div>
		<layout-footer />
	</div>
</template>

<script lang="ts" setup>
	import {
		computed,
		onMounted,
		reactive,
		ref,
		shallowRef
	} from 'vue'
	import type {
		InputInstance,
		FormInstance
	} from 'element-plus'
	import LayoutFooter from '@/layout/components/footer.vue'
	import useAppStore from '@/stores/modules/app'
	import useUserStore from '@/stores/modules/user'
	import {verify} from '@/api/user.ts'
	
	import cache from '@/utils/cache'
	import {
		ACCOUNT_KEY
	} from '@/enums/cacheEnums'
	import {
		PageEnum
	} from '@/enums/pageEnum'
	import {
		useLockFn
	} from '@/hooks/useLockFn'
	const passwordRef = shallowRef < InputInstance > ()
	const formRef = shallowRef < FormInstance > ()
	const appStore = useAppStore()
	const userStore = useUserStore()
	const route = useRoute()
	const router = useRouter()
	const remAccount = ref(false)
	const config = computed(() => appStore.config)
	const formData = reactive({
		account: '',
		password: '',
		captcha: ''
	})
	const rules = {
		account: [{
			required: true,
			message: '请输入账号',
			trigger: ['blur']
		}],
		password: [{
			required: true,
			message: '请输入密码',
			trigger: ['blur']
		}],
		captcha: [{
			required: true,
			message: '请输入验证码',
			trigger: ['blur']
		}]
	}
	// 回车按键监听
	const handleEnter = () => {
		if (!formData.password) {
			return passwordRef.value?.focus()
		}
		handleLogin()
	}
	// 登录处理
	const handleLogin = async () => {
		await formRef.value?.validate()
		// 记住账号，缓存
		cache.set(ACCOUNT_KEY, {
			remember: remAccount.value,
			account: formData.account
		})
		await userStore.login(formData)
		const {
			query: {
				redirect
			}
		} = route
		const path = typeof redirect === 'string' ? redirect : PageEnum.INDEX
		router.push(path)
	}
	const {
		isLock,
		lockFn: lockLogin
	} = useLockFn(handleLogin)
	const timeing = ref(`${import.meta.env.VITE_APP_BASE_URL}adminapi/login/verify`)
	const onImg=()=>{
		const a = Math.floor(Math.random() * (100 - 1) + 1)
		timeing.value = `${import.meta.env.VITE_APP_BASE_URL}adminapi/login/verify?${a}`
	}

	onMounted(() => {
		const value = cache.get(ACCOUNT_KEY)
		if (value?.remember) {
			remAccount.value = value.remember
			formData.account = value.account
		}
	})
</script>

<style lang="scss" scoped>
	$bor-color:#eeeff0;

	.login {
		// background-image: url('./images/login_bg.png');
		@apply min-h-screen bg-no-repeat bg-center bg-cover;

		.login-card {
			height: 400px;
		}

		.bor {
			border: 1px solid $bor-color;
		}

		.code {
			align-items: center;
			margin-left: 0px;
			border-top: 1px solid #dcdfe6;
			border-right: 1px solid #dcdfe6;
			border-bottom: 1px solid #dcdfe6;
			padding: 0 3px;
			cursor: pointer;
		}
	}
</style>
